<template>
    <div>
        <div class="navHeader">
            <el-dialog title="新增订单" :visible.sync="dialogVisible" width="60%">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="车牌号码">
                        <el-input v-model="form.licensePlate"></el-input>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-input v-model="form.pileName"></el-input>
                    </el-form-item>
                    <el-form-item label="车主名字">
                        <el-input v-model="form.carPerson"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型">
                        <el-select v-model="form.licenseType" placeholder="请选择活动区域">
                            <el-option label="外用车辆" value="外用车辆"></el-option>
                            <el-option label="自用车辆" value="自用车辆"></el-option>
                            <el-option label="内部车辆" value="内部车辆"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-switch v-model="form.orderStatus" active-color="#13ce66" inactive-color="#ff4949"
                            @change="submitDate">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="makeAddSure">确 定</el-button>
                </span>
            </el-dialog>
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="add">新增</el-button>
            <el-button type="danger" @click="del" :disabled="!pileIds.length > 0">删除</el-button>
            <el-input placeholder="请输入订单编号" v-model="filterParams.Order"></el-input>
            <el-input placeholder="请输入车牌号码" v-model="filterParams.licensePlate"></el-input>
            <!-- <div class="block">
                <el-date-picker v-model="filterParams.dateTime" type="daterange" align="right" unlink-panels
                    range-separator="至" start-placeholder="订单日期" end-placeholder="订单日期">
                </el-date-picker>
            </div> -->
            <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div>
            <div class="btns">   
                <el-button @click="handlePrint" style="background:#007761;color: white;margin-bottom: 10px;">导出</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" class="order">
                <el-table-column type="selection" width="150">
                </el-table-column>
                <el-table-column type="index" width="150" label="序号">
                </el-table-column>
                <el-table-column prop="Order" label="订单编号" width="150">
                </el-table-column>
                <el-table-column prop="startTime" label="订单日期" width="200">
                </el-table-column>
                <el-table-column prop="licensePlate" label="车牌号码" width="150">
                </el-table-column>
                <el-table-column prop="pileName" label="设备名称" width="150">
                </el-table-column>
                <el-table-column prop="licenseType" label="车辆类型" width="150">
                </el-table-column>
                <el-table-column prop="startTime" label="充电开始时间" width="200">
                </el-table-column>
                <el-table-column prop="times" label="充电时长" width="150">
                    <template slot-scope="scope">
                        <div>{{ getTimeDate(scope.row.startTime,scope.row.endTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="chargingCapacity" label="充电量" width="150">
                    <template slot-scope="scope">
                        <div>{{ getNum(scope.row.startTime,scope.row.endTime) }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" width="150">
                    <template slot-scope="scope">
                        <el-button :type="scope.row.orderStatus?'success':'danger'" size="mini">{{ scope.row.orderStatus?'进行':'空闲' }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="160">
                </el-table-column>
                <el-table-column prop="cost" label="充电费用">
                    <template slot-scope="scope">
                        <div>{{getCost(0.08,getNum(scope.row.startTime,scope.row.endTime))?'￥'+getCost(0.08,getNum(scope.row.startTime,scope.row.endTime)).toFixed(3):''}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="cost" label="实付金额">
                    <template slot-scope="scope">
                        <div>{{getCost(0.08,getNum(scope.row.startTime,scope.row.endTime))?'￥'+getCost(0.08,getNum(scope.row.startTime,scope.row.endTime)).toFixed(3):''}}</div>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="updataRow(scope.$index, tableData)" size="small">
                            编辑
                        </el-button>
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="danger"
                            size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="filterParams.size"
            @current-change="pageChange" style="float:right">
        </el-pagination>
    </div>
</template>
<script>
import API from '@/api'
import { toXlsx } from '../../until/toXsl'
import { formatterDate } from '../../until/formatterDate' 
import { MessageBox } from 'element-ui'
export default {
    created() {
        this.getPileData()
        console.log(formatterDate(1,34000))
    },
    data() {
        return {
            form: {

            },
            filterParams: {
                page: 1,
                size: 9,
            },
            tableData: [],
            total: 0,
            pileIds: [],
            dialogVisible: false,
            updataId: '',
            updataData: {}
        }
    },
    methods: {
        getNum(startTime,endTime){
            if(startTime&&endTime){
                return ((new Date(endTime)-new Date(startTime))*0.0001).toFixed(3)
            }else {
                return ''
            }
        },
        getCost(price,time){
            if(price&&time){
                return price*time
            }else {
                return ''
            }
            
        },
        getTimeDate(startTime,endTime) {
            let time
            if (startTime && endTime) {
                time = new Date(endTime).getTime() - new Date(startTime).getTime()
                return `${Math.floor((time / (1000 * 60 * 60)) % 24)}小时${Math.floor((time / (1000 * 60)) % 60)}分钟${Math.floor((time / 1000) % 60)}秒`
            } else {
                return ''
            }
        },
        async getPileData() {
            const data = await API.getPileData({ ...this.filterParams })
            this.tableData = data.data
            console.log(this.tableData)
            this.total = data.total
        },
        pageChange(page) {
            this.filterParams = { ...this.filterParams, page }
            this.getPileData()
        },
        handleSelectionChange(data) {
            this.pileIds = data.map(val => val.pileId)
        },
        async del() {
            await MessageBox.confirm("是否确认删除?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            await API.delPileData({ pileIds: this.pileIds })
            this.$message.success('删除成功')
            this.pileIds = []
            this.getPileData()
        },
        deleteRow(index, scope) {
            this.pileIds = [scope[index].pileId]
            this.del()
        },
        async updataRow(index, scope) {
            this.updataId = scope[index].pileId
            const data = await API.getPileDetail({ pileId: this.updataId })
            this.form = data.data[0]
            this.dialogVisible = true
        },
        async search() {
            this.getPileData({ ...this.filterParams, page: 1 })
        },
        async makeAddSure() {
            if (this.form.pileId) {
                await API.updataPileData({ ...this.form })
                this.getPileData({ ...this.filterParams })
            } else {
                await API.addPileData({ ...this.form })
                this.getPileData({ ...this.filterParams })
            }
            this.dialogVisible = false

        },
        getTime(date) {
            if (!date) {
                return ''
            }
            return `${new Date(date).getFullYear()}-${new Date(date).getMonth() + 1
                }-${new Date(date).getDate()} ${new Date(date).getHours() >= 10 ? new Date(date).getHours() : '0' + new Date(date).getHours()}:${new Date(date).getMinutes() >= 10 ? new Date(date).getMinutes() : '0' + new Date(date).getMinutes()}:${new Date(date).getSeconds() > 10 ? new Date(date).getSeconds() : '0' + new Date(date).getSeconds()}`;
        },
        submitDate() {
            if (this.form.orderStatus) {
                this.form.startTime = this.getTime(new Date())
                this.form.endTime=''
            } else {
                this.form.endTime = this.getTime(new Date())
            }
        },
        add() {
            this.form = {}
            this.dialogVisible = true
        },
        reset() {
            this.filterParams = { page: 1, size: 9 }
            this.getPileData({ ...this.filterParams })
        },
        handlePrint() {
            // window.print()
            toXlsx('.order', '充电订单', '.caozuo')
        }
    }
}
</script>
<style scoped>
.navHeader {
    display: flex;
}
.btns {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>